<template>
  <section :class="[cls]" class="canvasSign">
    <canvas
      id="myCanvas"
      :width="width"
      :height="height"
      @mousedown="onmousedown"
      @mouseup="onmouseup"
      @touchstart="ontouchstart"
      @touchmove="ontouchmove"
      @touchend="ontouchend"
    ></canvas>
  </section>
</template>
<script>
export default {
  props: {
    //宽度
    width: {
      type: Number,
      default: 400
    },
    //高度
    height: {
      type: Number,
      default: 200
    },
    //自定义class
    cls: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      start_x: "",
      start_y: "",
      move_x: "",
      move_y: "",
      end_x: "",
      end_y: "",
      rect: {},
      canvas: null,
      ctx: null
    };
  },
  created() {},
  mounted() {
    let th = this;
    th.canvas = document.getElementById("myCanvas");
    th.ctx = th.canvas.getContext("2d");
    document.onmouseup = function(ev) {
      document.onmousemove = null;
    };
  },
  methods: {
    //鼠标按下 (PC)
    onmousedown(e) {
      const th = this;
      th.rect = th.canvas.getBoundingClientRect();
      th.start_x = e.pageX - th.rect.left;
      th.start_y = e.pageY - th.rect.top;
      //开始本次绘画
      th.ctx.beginPath();
      //画笔起始点
      th.ctx.moveTo(th.start_x, th.start_y);
      document.onmousemove = function(e) {
        th.move_x = e.pageX - th.rect.left;
        th.move_y = e.pageY - th.rect.top;
        //根据鼠标路径绘画
        th.ctx.lineTo(th.move_x, th.move_y);
        //立即渲染
        th.ctx.stroke();
        e.preventDefault();
      };
    },
    //鼠标弹起 (PC)
    onmouseup(e) {
      let th = this;
      th.end_x = e.pageX - th.rect.left;
      th.end_y = e.pageY - th.rect.top;
      //创建从当前点到开始点的路径
      th.ctx.closePath(); 
    },
    //按下（移动端）
    ontouchstart(e) {
      let th = this;
      th.rect = th.canvas.getBoundingClientRect();
      th.start_x = e.touches[0].pageX - th.rect.left;
      th.start_y = e.touches[0].pageY - th.rect.top;
      //开始本次绘画
      th.ctx.beginPath();
      //画笔起始点
      th.ctx.moveTo(th.start_x, th.start_y);
    },
    //移动（移动端）
    ontouchmove(e) {
      let th = this;
      th.move_x = e.touches[0].pageX - th.rect.left;
      th.move_y = e.touches[0].pageY - th.rect.top;
      //根据鼠标路径绘画
      th.ctx.lineTo(th.move_x, th.move_y);
      //立即渲染
      th.ctx.stroke();
      e.preventDefault();
    },
    //结束（移动端）
    ontouchend(e) {
      let th = this;
      th.end_x = e.changedTouches[0].pageX - th.rect.left;
      th.end_y = e.changedTouches[0].pageY - th.rect.top;
      //创建从当前点到开始点的路径
      th.ctx.closePath();
    },
    //清空
    clear() {
      let th = this;
      // 清空画布
      th.ctx.clearRect(0, 0, th.width, th.height);
    },
    //保存
    save(fn) {
      let th = this;
      //将生成的图片赋给img元素
      let img = th.canvas.toDataURL("image/png");
      fn(img);
    }
  }
};
</script>
<style scoped lang="scss">
.canvasSign {
  background-color: white;
  #myCanvas {
    box-shadow: 0 0 2px #ccc;
    display: block;
    box-sizing: border-box;
  }
}
</style>